<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://amc.af.mil/portal-el" prefix="portal" %>
<%@ taglib uri="http://amc.af.mil/radtaglibrary" prefix="rad" %>
<%@ taglib prefix="display" uri="http://displaytag.sf.net" %>
<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<html>
<head>
    <title>Create Report of Survey/Waiver</title>
    <link type="text/css" rel="stylesheet" href="yui/build/calendar/assets/skins/sam/calendar.css"/>
    <link type="text/css" rel="stylesheet" href="yui/build/calendar/assets/skins/sam/calendar-skin.css"/>
    <link type="text/css" rel="stylesheet" href="yui/build/button/assets/skins/sam/button.css"/>
    <script type="text/javascript" src="yui/build/yuiloader/yuiloader-beta-min.js"></script>
    <script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="yui/build/calendar/calendar.js"></script>
    <style type="text/css">
        #calContainer {
            display: none;
            position: absolute;
            left: 200px;
            top: 300px;
            z-index: 1
        }
    </style>    
</head>

<rad:useBean id="adpeAccountViewHelper"/>

<body>
<div id="portal-left-bar">
    <jsp:include page="../navigation/navigationMenu.jsp"/>
</div>

<div id="portal-content">
    <portal:box title="Create Report of Survey/Waiver Package" style="width: 800px;">
        <html:form action="ros/createPackage.do">
            <div id="ros">
                <p>
                    <label for="adpeAccount">ADPE Account</label>
                    <html:select property="adpeAccountId" styleId="adpeAccountId" value="${requestScope.accountId}">
                        <html:optionsCollection name="adpeAccountViewHelper"
                                                property="adpeAccountsByAccount"
                                                value="id"
                                                label="name"/>
                    </html:select>
                </p>

                <p>
                    <label for="packageType">Package Type</label>
                    <html:select property="packageType" styleId="packageType" value="1">
                        <html:option value="0">Report of Survey</html:option>
                        <html:option value="1">Waiver</html:option>
                    </html:select>
                </p>

                <p>
                    <label for="packageName">Internal Name</label>
                    <html:text property="packageName" maxlength="25" styleId="packageName"/>
                </p>

                <p>
                    <label for="trackingNumber">LRS Number</label>
                    <html:text property="trackingNumber" maxlength="25" styleId="trackingNumber"/>
                </p>

                <p>
                    <label for="rosOfficer">ROS Officer Name</label>
                    <html:text property="rosOfficer" maxlength="75" styleId="rosOfficer"/>
                </p>

                <p>
                    <label for="initDate">Initiation Date</label>
                    <html:text property="initDate" maxlength="25" styleId="initDate" readonly="true"/>
                    <button type="button" id="showCalendar">
                        <img src="images/calendar-icon.gif" alt="Calendar"/>
                    </button>

                    <div id="parent1" class="yui-skin-sam">
                        <div id="calContainer"></div>
                    </div>
                </p>


                <p>&nbsp;</p>


                <p>
                    <table width="100%">
                        <tr>
                            <td>
                                <label for="search">Serial</label>
                                <input type="text" id="search" maxlength="25"/>
                                <input type="button" value="Search" onclick="javascript:createRosPackageDataRow();"/>
                            </td>
                            <td style="width: 350px; margin-left: auto; margin-right: auto;">
                                <div id="message"
                                     style="color: red; border: solid; border-width: 1px; margin-left: 2em; margin-right: 2em;">
                                    <p>To Add Items to A Package, please enter the serial number and
                                        click Search.</p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </p>

                <p>&nbsp;</p>
                <table id="rosPackageItems" style="width:100%">
                    <thead>
                        <tr>
                            <th>Serial</th>
                            <th>Description</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="content">

                    </tbody>
                </table>
                <p>&nbsp;</p>

                <p><html:submit value="Save Package"/></p>
            </div>
        </html:form>
    </portal:box>
</div>
<script type="text/javascript">

    YAHOO.namespace("createRos.initiationDateCalendar");
    YAHOO.createRos.initiationDateCalendar.init = function() {

        YAHOO.createRos.initiationDateCalendar.calendar = new YAHOO.widget.Calendar("pdCalendar",
                "calContainer",
        {close: true, title: 'Purchase Date'});

        YAHOO.createRos.initiationDateCalendar.calendar.render();
        YAHOO.createRos.initiationDateCalendar.calendar.hide();

        YAHOO.util.Event.addListener('showCalendar', 'click', showCalendar);

        YAHOO.createRos.initiationDateCalendar.calendar.selectEvent.subscribe(handleSelect,
                YAHOO.createRos.initiationDateCalendar.calendar,
                true);
    }

    function showCalendar() {
        YAHOO.createRos.initiationDateCalendar.calendar.show();

    }

    function handleSelect(type, args, obj) {

        var allDates = args[0];
        var singleDate = allDates[0];

        var months = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];

        var year = singleDate[0];
        var month = singleDate[1] - 1;
        var day = singleDate[2];

        var formattedDate = day + '-' + months[month] + '-' + year;

        document.getElementById('initDate').value = formattedDate;

        YAHOO.createRos.initiationDateCalendar.calendar.hide();
    }

    YAHOO.util.Event.onDOMReady(YAHOO.createRos.initiationDateCalendar.init);

</script>
</body>
</html>